<template>
  <div class="page-box">
      <div class="price-box">
        <div class="card-item">
          <div>{{member.name}}</div>
          <div class="price">
            <div v-if="member.memberType == '0'">1个月</div>
            <div v-if="member.memberType == '1'">3个月</div>
            <div v-if="member.memberType == '2'">12个月</div>
            <div v-if="member.memberType == '0'">{{member.monthFee}}元</div>
            <div v-if="member.memberType == '1'">{{member.quarterFee}}元</div>
            <div v-if="member.memberType == '2'">{{member.annualFee}}元</div>
          </div>
        </div>

        <div v-if="member.isDiscount">
          <div class="discount-label" v-if="member.memberType == '0'">优惠价格：{{member.monthFeeDiscount}}元</div>
          <div class="discount-label" v-if="member.memberType == '1'">优惠价格：{{member.quarterFeeDiscount}}元</div>
          <div class="discount-label" v-if="member.memberType == '2'">优惠价格：{{member.annualFeeDiscount}}元</div>
        </div>

        <div class="qr-box">
           <div class="qr-code" ref="qrcodejs2" >
             <div class="qr-success" v-if="isPay">
               <img width="50px" height="50px" src="../../assets/images/success.png"/>
             </div>
           </div>
           <div class="qr-label" v-if="isPay">扫码支付成功</div>
           <div class="qr-label" v-else>微信扫码支付</div>
        </div>


      </div>

      <div class="back-btn" @click="back">返回</div>
  </div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  export default {
  	props: {
  		member: {
  			// 是否是自己
  			type: Object,
  			required: false,
  			default: function() {
  				return {};
  			}
  		},
  	},
  	data() {
  		return {
        isPay: false,
  		}
  	},
  	created() {
      this.$nextTick(() => {
            this.initQrCode();
      });
    },
  	methods: {
      initQrCode() {
        this.qrcode = new QRCode(
        this.$refs.qrcodejs2,
        {text: this.member.codeUrl,
        width: 150,
        height: 150,
        })
      },
      payOk() {
        this.isPay = true;
      },
      back() {
        this.$emit('back');
      },
  	}
  }
</script>

<style lang="scss" scoped>
  .page-box {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .tab-box{
    display: flex;
  }
  .tab-item {
    font-size: 12px;
    width: 100px;
    display: flex;
    justify-content: center;
    padding: 8px;
    border: 1px solid #2979ff;
    border-right: 0;
    cursor: pointer;
  }
  .tab-box .tab-item:last-child{
    border-right: 1px solid #2979ff;
  }
  .active {
    background-color: #2979ff;
    color: #fff;
  }

  .price-box {
    margin: 40px 0;
  }
  .card-item {
    color: #303133;
    font-size: 16px;
    width: 380px;
    border: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin-bottom: 10px;
  }
  .price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 200px;
  }
  .pay-btn {
    background-color: #07C160;
    padding: 10px 40px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
  }
  .discount-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
  }
  .discount-input {
    display: flex;
    align-items: center;
  }
  .discount-label {
    font-size: 16px;
    color: #303133;
  }
  .qr-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
  }
  .qr-label {
    font-size: 16px;
    color: #303133;
    margin-top: 10px;
  }
  .qr-code {
    position: relative;
  }
  .qr-success {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #3e3029ab;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .back-btn {
    background-color: #2979ff;
    padding: 8px 40px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
  }
</style>
